<template>
  <div class="heade">
    <el-row>
      <el-col :span="23">
        <div class="title">
          <div class="tex"></div>
          <span class="text">派费结算指引</span>
          <span class="text1">完成以下三步步,轻松线上化出账</span>
          <span class="text2">收起</span>
          <i style="color: #2087d0; margin-left: 7px" class="el-icon-arrow-up"></i>
        </div>
        <div style="display: flex; margin: 20px; background-color: #ffff">
          <div class="title1">
            <div class="img"><img src="@/static/image/1.png" alt="" /></div>
            <div class="text3">
              <div class="text4">选择符合网点的结算模式</div>
              <div class="text5">推荐使用预付款自动结算</div>
            </div>
          </div>
          <div class="title1 tit">
            <div class="img"><img src="@/static/image/2.png" alt="" /></div>
            <div class="text3">
              <div class="text4">设置派费报价单</div>
              <div class="text5">设置承包区／小件员的派费费率</div>
            </div>
          </div>
          <div class="title1 tit">
            <div class="img"><img src="@/static/image/3.png" alt="" /></div>
            <div class="text3">
              <div class="text4">系统自动出账，推送账单给承包区／小件员</div>
              <div class="text5">预付款自动结算，可自动下账自动付款</div>
            </div>
          </div>
          <div class="title1 tit">
            <div class="img"><img src="@/static/image/4.png" alt="" /></div>
            <div class="text3">
              <div class="text4">点击“新增结算关系”按钮</div>
              <div class="text5">如已配置结算关系</div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row v-show="show">
      <el-col :span="23" class="pailie">
        <span class="js">请选择结算方式</span>
        <div class="flex">
          <div class="first">
            <div>
              <img src="../../../static/image/weixuanfuk.png" alt="" />
              <span class="f-24">预付款<span class="blue">自动付款</span></span>
              <span>系统自动出账,自动付款(t付t-3)</span>
            </div>
          </div>

          <div class="first">
            <div>
              <img src="../../../static/image/yixuanshoujiesuan.png" alt="" />
              <span class="f-24">预付款<span class="blue">手动付款</span></span>
              <span>系统自动出账，手动操作预 付款并下单</span>
            </div>
          </div>

          <div class="first">
            <div>
              <img src="../../../static/image/weixianxia.png" alt="" />
              <span class="f-24 blue">线下<span style="color: black">结算</span></span>
              <span>系统自动出账，手动点击 一键下账，线下付款</span>
            </div>
          </div>
        </div>

        <button class="next" @click="next">下一步</button>
      </el-col>
    </el-row>
    <el-row v-show="isshow" type="flex" justify="space-between">
      <el-col :span="6" :offset="1">
        <div>
          <el-form>
            <el-form-item label="报价周期" style="width: 600px">
              <div class="flex">
                <el-date-picker
                  v-model="value1"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
      <el-col :span="10">
        <div>
          <el-button type="primary" @click="open">新增</el-button>
          <el-button type="primary">删除</el-button>
        </div>
      </el-col>
    </el-row>
    <el-row v-show="isshow" style="margin: 20px">
      <el-col :span="23">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column label="序号" width="120">
            <template slot-scope="scope">{{ scope.row.date }}</template>
          </el-table-column>
          <el-table-column prop="name" label="所属网点" width="120"> </el-table-column>
          <el-table-column prop="address" label="配置名称" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="name" label="导出类型" width="120"> </el-table-column>
          <el-table-column prop="name" label="导出对象名称" width="120">
          </el-table-column>
          <el-table-column prop="name" label="自动导出日期" width="120">
          </el-table-column>
          <el-table-column prop="name" label="创建日期" width="120"> </el-table-column>
          <el-table-column prop="name" label="操作" width="120"> </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <div class="block" style="display: flex; justify-content: end">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
      >
      </el-pagination>
    </div>

    <el-drawer
      title="添加下级对象"
      :visible.sync="drawer"
      size="80%"
      :direction="direction"
      :before-close="handleClose"
    >
      <div style="height: 100%">
         <el-col class="drawer">
 <el-form ref="form" :model="form" label-width="100px"
            class="flex" style="width:100%">
            <el-form-item label="结算类型"  style="width: 240px">
            <el-select v-model="form.region" placeholder="请选择活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="结算对象"  style="width: 240px">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="对象编号"  style="width: 240px">
            <el-input  v-model="form.desc"></el-input>
          </el-form-item>
          <el-form-item >
            <el-button type="primary" >查询</el-button>
            <el-button>重置</el-button>
          </el-form-item>
        </el-form>
         <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
        </el-col>

       
        
       
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true,
      isshow: false,
      drawer: false,
      value1:'',
      direction: "rtl",
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      currentPage4: 4,

      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
     handleSelectionChange(val) {
        this.multipleSelection = val;
      },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    // 下一步
    next() {
      this.show = false;
      this.isshow = true;
    },
    // 打开弹窗
    open() {
      this.drawer = true;
    },
    handleClose(done) {
      done();
    },
  },
};
</script>

<style lang="scss" scoped>
.heade {
  background-color: #f5f5f5;
  padding-top: 26px;
}

.first {
  width: 348px;
  height: 348px;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  border: 1px dashed #ccc;

  div {
    display: flex;
    flex-flow: column;
    justify-content: space-around;
    align-items: center;
    height: 100%;

    img {
      width: 116px;
      height: 116px;
    }
  }
}

.blue {
  color: #2087d0;
}

.pailie {
  display: flex;
  flex-flow: column;
  justify-content: space-around;
  align-items: center;
  flex-flow: column;
  background-color: #ffffff;
  height: 728px;
  margin: 20px;
}

.flex {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 60%;
}

.js {
  font-size: 30px;
  font-weight: 600;
  padding: 20px 0;
}

.f-24 {
  font-size: 24px;
}

.title {
  margin-left: 32px;

  .tex {
    background: linear-gradient(-24deg, #e7f3fb, #8dc0e4, #2087d0);
  }

  .text {
    font-size: 20px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
  }

  .text1 {
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
    margin-left: 22px;
  }

  .text2 {
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #2087d0;
    margin-left: 16px;
  }
}

.title1 {
  width: 450px;
  height: 108px;
  background: #ffffff;
  box-shadow: 0px 2px 2px 0px rgba(113, 121, 144, 0.06);
  border-radius: 8px;
  margin: 22px 0 0 30px;
  display: flex;

  .img {
    margin-left: 24px;
    margin-top: 30px;
  }

  .text3 {
    margin-left: 20px;
    margin-top: 32px;

    .text4 {
      font-size: 18px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #333333;
    }

    .text5 {
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #666666;
      line-height: 8px;
      margin-top: 11px;
    }
  }
}
.next {
  background-color: #2087d0;
  color: #ffffff;
  border: none;
  width: 456px;
  height: 48px;
  border-radius: 20px;
}

.tit {
  margin-left: 20px;
}
.title00 {
  padding: 20px 50px;
}
.line00 {
  background: #9999;
  height: 1px;
  margin: 8px 50px;
}
.title11 {
  padding: 20px 30px;
}
.line11 {
  background: #9999;
  height: 1px;
  margin: 8px 30px;
}
.flex {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
.title2 {
  width: 1860px;
  height: 1136px;
  background: #ffffff;
  box-shadow: 0px 2px 2px 0px rgba(113, 121, 144, 0.06);
  border-radius: 8px;
  margin-left: 30px;
  margin-top: 20px;
  padding-top: 30px;

  .text6 {
    display: flex;
    margin-left: 30px;
    justify-content: space-between;

    .text7 {
      font-size: 24px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #333333;
    }

    .bt {
      width: 208px;
      height: 48px;
      background: #2087d0;
      border-radius: 4px;
      border: 1px #2087d0 solid;
      margin-right: 30px;
      margin-top: -10px;
      color: #fff;
    }
  }
}

.line {
  width: 1860px;
  height: 1px;
  background: #d8d8d8;
  border-radius: 1px;
  margin-top: 15px;
}

.title3 {
  justify-content: space-between;
  margin-top: 16px;

  .btt {
    width: 80px;
    height: 42px;
    background: #2087d0;
    border-radius: 4px;
    border: #2087d0;
  }

  .input {
    width: 286px;
  }
}
.drawer {
  height: 100%;
  overflow: auto;
}

.title4 {
  display: flex;

  .text8 {
    margin-left: 30px;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
    margin-top: 10px;
    font-weight: 800;
  }

  .bt {
    margin-left: 23px;
    width: 160px;
    height: 42px;
    background: #2087d0;
    border-radius: 4px;
    border: 1px #2087d0 solid;
    color: #fff;
    font-weight: 500;
  }

  .bt1 {
    margin-left: 16px;
    border: 1px #2087d0 solid;
    color: #fff;
    font-weight: 500;
  }
}
</style>
